<template>
  <div>
    <titleXX :name="title"></titleXX>
    <van-pull-refresh
      class="pull-refresh"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="list.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 列表内容 -->
        <div class="ulbox" v-if="list.length > 0">
          <div class="ul" v-for="(item, index) in list" :key="index">
            <div class="li_tile">
              <div class="name">{{ item.userName }}</div>
              <div class="date">{{ item.orderTime }}</div>
            </div>
            <div v-if="item.detailList.length > 0">
              <div
                v-for="(item2, index2) in item.detailList"
                :key="index2"
                class="paddingLeft10 WZ_size_14 YYCPlist"
              >
                {{ item2.name }}
                <span style="color: rgb(255, 141, 26)">+{{ item2.qty }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- <div v-for="(item, index) in list" :key="index" class="item">
        
        {{ item.districtName }}
      </div> -->

        <!-- 自定义错误提示（可选增强样式） -->
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import titleXX from "../../components/title.vue";
import { getMealUserList } from "@/api/realAssets/icsharedstation/CPXX/index.js";
import { Toast } from "vant";
export default {
  components: { titleXX },
  data() {
    return {
      title: "预约人员列表",
      XXyz: {},
      finished: false,
      error: false,
      loading: false,
      refreshing: false,
      list: [],
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    onSearch() {
      this.onRefresh();
    },
    //清空搜索
    onCancel() {
      // console.log(XXyz.value.districtName);
      // XXyz.value.districtName = "";
      this.onRefresh();
    },
    retryLoad() {
      this.error = false;
      this.loading = true;
      this.onLoad();
    },
    onRefresh() {
      //   list.value = [];
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;

      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      this.XXyz = JSON.parse(decodeURIComponent(this.$route.query.XX));
      getMealUserList(this.XXyz).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          this.list = [...this.list, ...res.data];
          // list.value = res.data;
        }
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.XXyz.pageNumber++;
        }
        this.refreshing = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
@import "../../static/css/GYcSS.less";

.ul {
  background: #fff;
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 10px !important;
  .li_tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
    .name {
      font-weight: 700;
    }
    .date {
      color: rgb(128, 128, 128);
    }
  }
  .YYCPlist {
    line-height: 30px;
  }
}
</style>